{php include wl_template('common/header');}
<style>
	.order-overview .order-info .info-group{width:20%; text-align:center; float:left;}
	.order-overview .order-info .info-group+.info-group{border-left:1px dotted #ccc; }
	.order-overview .h4{font-size:22px; display:block;}
	.order-overview .order-widget .info-group{width:33.3%; text-align:center; float:left; }
	.order-overview .order-widget .info-group+.info-group{border-left:1px solid #ddd;}
	.order-overview .coordinate{margin-top:20px;}
</style>
<div class="order-overview">
	<div class="order-info panel panel-default">
		<div class="panel-body clearfix">
			<div class="info-group">
				<span class="h4">
					<a href="#">{$seven_orders}</a>
				</span>
				<span class="info-description">7日下单总数</span>
			</div>
			<div class="info-group">
				<span class="h4">
					<a href="#">{$seven_nocash_orders}</a>
				</span>
				<span class="info-description">7日未支付订单</span>
			</div>
			<div class="info-group">
				<span class="h4">
					<a href="#">{$obligations}</a>
				</span>
				<span class="info-description">7日支付订单</span>
			</div>
			<div class="info-group">
				<span class="h4">
					<a href="#">{$undelivereds}</a>
				</span>
				<span class="info-description">7日退款订单</span>
			</div>
			<div class="info-group">
				<span class="h4"><a href="#" id="js-price">￥{if !empty($incomes)}{$incomes}{else}0.00{/if}</a></span>
				<span class="info-description">7日付款金额</span>
			</div>
		</div>
	</div>
	<div class="order-widget">
		<div class="panel panel-default">
			<div class="panel-heading">
			</div>
			<div class="panel-body">
				<div class="info clearfix">
					<div class="info-group">
						<p class="h4">
							<a href="#">{$yesterday_orders}</a>
						</p>
						<p class="info-description">昨日下单笔数</p>
					</div>
					<div class="info-group">
						<p class="h4">
							<a href="#">{$yesterday_payorder}</a>
						</p>
						<p class="info-description">昨日付款订单</p>
					</div>
					<div class="info-group">
						<p class="h4">
							<a href="#">{$yesterday_obligation}</a>
						</p>
						<p class="info-description">昨日发货订单</p>
					</div>
				</div>
				<ul class="nav nav-tabs" style="border-color: #ddd;"></ul>
				<div class="clearfix" id="clear" style="padding-top: 20px;">
					<div class="pull-right">
							<div class="checkbox">
								<label style="color:#57B9E6;">蓝色：所有订单</label>&nbsp;
								
								<label style="color:rgba(35,188,21,1)">绿色： 已完成订单</label>&nbsp;
								<label style="color:rgba(224,13,6,1);">红色：已支付订单</label>&nbsp;
								<label style="color:rgba(255,180,50,1);">橙色：退款订单</label>
							</div>
						</div>
					<div class="clearfix">
						<form action="./index.php" method="get" class="form-horizontal" role="form" id="form2">
				            <input type="hidden" name="c" value="site" />
				            <input type="hidden" name="a" value="entry" />
				            <input type="hidden" name="m" value="lexiangpingou" />
				            <input type="hidden" name="do" value="order" />
				            <input type="hidden" name="ac" value="order" />
				            <input type="hidden" name="op" value="summary" />
				            <div class="form-group">
				                    <label class="col-xs-12 col-sm-2 col-md-2 col-lg-1 control-label">日期</label>
				                    <div class="col-sm-4">
				                        {php echo tpl_form_field_daterange('time', array('start'=>date('Y-m-d H:i:s', $starttime),'end'=>date('Y-m-d H:i:s', $endtime)));}
				                    </div>
				                </div>
				            <div class="form-group">
				            </div>
				        </form>
					</div>
					<br>
					<div class="panel-default" style="padding:1em;border-radius: 0px;">
						<nav role="navigation" class="navbar navbar-default navbar-static-top" style="margin: -1em -1em 1em -1em;background-color: #f4f5f9;border: 1px solid #e7e7eb;">
							<div class="container-fluid">
								<div class="navbar-header">
									<a href="javascript:;" class="navbar-brand">订单统计</a>
								</div>
							</div>
						</nav>
						<div style="margin-top:20px;">
							<canvas id="myChart" height="80"></canvas>
						</div>
					</div>
				</div>
				<script>
					var jsLink = document.getElementById("js-price");
					var str = jsLink.textContent.slice(1);
					jsLink.textContent = '￥' + (Number(str).toFixed(2));

					require(['chart', 'daterangepicker'], function(c){
						$('.daterange').on('apply.daterangepicker', function(ev, picker) {
							$('#form2')[0].submit();
						});
						var label = {php echo json_encode($day)};
						var datasets =  {php echo json_encode($hit)};
						var datasets2 = {php echo json_encode($status4)};
						var datasets3 = {php echo json_encode($status1)};
						var datasets4 = {php echo json_encode($status2)};
						var lineChartData = {
							labels : label,
							datasets : [
								{
									fillColor : "rgba(36,165,222,0.1)",
									strokeColor : "rgba(36,165,222,1)",
									pointColor : "rgba(36,165,222,1)",
									pointStrokeColor : "#fff",
									pointHighlightFill : "#fff",
									pointHighlightStroke : "rgba(36,165,222,1)",
									data : datasets
								},
								{
									fillColor : "rgba(35,188,21,0.1)",
									strokeColor : "rgba(35,188,21,1)",
									pointColor : "rgba(35,188,21,1)",
									pointStrokeColor : "#fff",
									pointHighlightFill : "#fff",
									pointHighlightStroke : "rgba(35,188,21,1)",
									data : datasets2
								},
								{
									fillColor : "rgba(224,13,6,0.1)",
									strokeColor : "rgba(224,13,6,1)",
									pointColor : "rgba(224,13,6,1)",
									pointStrokeColor : "#fff",
									pointHighlightFill : "#fff",
									pointHighlightStroke : "rgba(224,13,6,1)",
									data : datasets3
								},
								{
									fillColor : "rgba(255,180,50,0.1)",
									strokeColor : "rgba(255,180,50,1)",
									pointColor : "rgba(255,180,50,1)",
									pointStrokeColor : "#fff",
									pointHighlightFill : "#fff",
									pointHighlightStroke : "rgba(255,180,50,1)",
									data : datasets4
								}
							]
						}
						var myLine = new Chart(document.getElementById("myChart").getContext("2d")).Line(lineChartData, {responsive : true});
					});
					
				</script>
			</div>
		</div>
	</div>
</div>
<script>
	require(['chart', 'jquery', 'daterangepicker'], function(c, $) {
		$('.text-danger').hover(function() {
			var obj = this;
			var title = $(this).attr('data-title');
			var $pop = util.popover(obj, function($popover, obj) {
				obj.$popover = $popover;
			}, '<div>' + title + '</div>');
		}, function() {
			this.$popover.remove();
		});
		$('.daterange').on('apply.daterangepicker', function(ev, picker) {
			$('input[name="scroll"]').val($(document).scrollTop());
			$('#form1')[0].submit();
		});
		{if $scroll} 
			var scroll = "{$scroll}";
			$("html,body").animate({scrollTop: scroll}, 300);
		{/if}
		var chart = null;
		var chartDatasets = null;
		var templates = {
			flow1: {
				label: '昨日下单笔数',
				fillColor : "rgba(203,48,48,0.1)",
				strokeColor : "rgba(203,48,48,1)",
				pointColor : "rgba(203,48,48,1)",
				pointStrokeColor : "#fff",
				pointHighlightFill : "#fff",
				pointHighlightStroke : "rgba(203,48,48,1)",
			},
			flow2: {
				label: '昨日付款订单',
				fillColor : "rgba(149,192,0,0.1)",
				strokeColor : "rgba(149,192,0,1)",
				pointColor : "rgba(149,192,0,1)",
				pointStrokeColor : "#fff",
				pointHighlightFill : "#fff",
				pointHighlightStroke : "rgba(149,192,0,1)",
			},
			flow3: {
				label: '昨日发货订单',
				fillColor : "rgba(231,160,23,0.1)",
				strokeColor : "rgba(231,160,23,1)",
				pointColor : "rgba(231,160,23,1)",
				pointStrokeColor : "#fff",
				pointHighlightFill : "#fff",
				pointHighlightStroke : "rgba(231,160,23,1)",
			}
		};

		function refreshData() {
			if(!chart || !chartDatasets) {
				return;
			}
			var visables = [];
			var i = 0;
			$('.checkbox input[type="checkbox"]').each(function(){
				if($(this).attr('checked')) {
					visables.push(i);
				}
				i++;
			});
			var ds = [];
			$.each(visables, function(){
				var o = chartDatasets[this];
				ds.push(o);
			});
			chart.datasets = ds;
			chart.update();
		}

		var url = location.href + '&#aaaa';
		$.post(url, function(data){
			var data = $.parseJSON(data)
			var datasets = data.datasets;

			if(!chart) {
				var label = data.label;
				var ds = $.extend(true, {}, templates);
				ds.flow1.data = datasets.flow1;
				ds.flow2.data = datasets.flow2;
				ds.flow3.data = datasets.flow3;
				var lineChartData = {
					labels : label,
					datasets : [ds.flow1, ds.flow2, ds.flow3]
				};

				var ctx = document.getElementById("myChart").getContext("2d");
				chart = new Chart(ctx).Line(lineChartData, {
					responsive: true
				});
				chartDatasets = $.extend(true, {}, chart.datasets);
			}
			refreshData();
		});

		$('.checkbox input[type="checkbox"]').on('click', function(){
			$(this).attr('checked', !$(this).attr('checked'))
			refreshData();
		});
	});
</script>
{php include wl_template('common/footer');}